<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>PKing | game</title>

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>
 
  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>
  
  <!-- force screen orientation on some browser -->
  <meta name="screen-orientation" content=""/>
  <meta name="x5-orientation" content="">

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">

  <!--<link rel="apple-touch-icon" href=".png" />-->
  <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

  <link rel="stylesheet" type="text/css" href="style-mobile.css"/>

</head>
<body>
  <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
  <canvas id="share" width="0" height="0"></canvas>
</body>
  <script type="text/javascript" src="./adID.js"></script>
  <script src="src/settings.js" charset="utf-8"></script>
  <script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>;
  <script src="main.js" charset="utf-8"></script>
  <script type="text/javascript">
  var scenceGames = window._CCSettings.launchScene.split("/").pop().split(".").shift();
//  window.game_Name = window.facebookAdIds[scenceGames].name;
  window.game_Name = '';
  var data = new Date()
   window.onload = function() {
      FBInstant.initializeAsync().then(function(){   //初始化 SDK 库 应在调用其他任何 SDK 函数 之前调用此函数
          window.showInterstitial.init();
          pkingGameStart();
      })
    };
    function DownloadEnd(){
      FBInstant.setLoadingProgress(100);
      
      FBInstant.startGameAsync().then(function() {
        shareImg.headUrl = FBInstant.player.getPhoto();
        shareImg.init();
        if(cc.gameStartFn){
            cc.gameStartFn()
        }
      });
      shareImg.headUrl = FBInstant.player.getPhoto();
      shareImg.init();
    }
    var shareImg = {
            bgUrl: null,
            bgtUrl: "./img/guang.png",
            scoreUrl: "./img/fenshu.png",
            headUrl:null,
            bg: null,
            bgt: null,
            head: null,
            score: null,
            canvas: null,
            ctx: null,
            do(){
              this.canvas = document.getElementById("share");
                this.ctx = this.canvas.getContext("2d");
                return this;
            },
            loader(type, url){
                var img = new Image(), self = this;
               
                img.crossOrigin = "Anonymous";
                img.onload = function(){
                    self[type] = img;
                    self.show();
                }
                img.src = url;
            },

            init(){
                this.loader("bg", this.bgUrl);
                this.loader("bgt", this.bgtUrl);
                this.loader("score", this.scoreUrl);
                this.loader("head", this.headUrl)
            },

            show(){
                if(this.bg && this.bgt && this.score && this.head){
                    this.draw();
                }
            },

            draw(score){
              if(score !== undefined) this.scoreA = score ;
              if(!(this.bg && this.bgt && this.score && this.head)){
                shareImg.headUrl = FBInstant.player.getPhoto();
                shareImg.init();
                return ;
              }
                var width = this.bg.width, 
                    height = this.bg.height,
                    w = this.bgt.width, 
                    h = this.bgt.height,
                    sw = this.score.width,
                    sh = this.score.height;
                this.canvas.width = width;
                this.canvas.height = height;
                this.ctx.drawImage(this.bg, 0, 0, width, height);
                 this.ctx.drawImage(this.head, (width - w) / 2 + (w - 144) / 2 - 2, ((height - h - sh) / 2) + ((h - 144) / 2) + 2, 145, 145);
                this.ctx.drawImage(this.bgt, (width - w) / 2, (height - h - sh) / 2 , w, h);
                this.ctx.drawImage(this.score, (width - sw) / 2, (height - h - sh) / 2 + h , sw , sh);
                this.ctx.font="bold 50px Arial";
                this.ctx.fillStyle = "#fbdc79";
                this.ctx.textAlign= "center";
                this.ctx.fillText( this.scoreA, (width - sw) / 2 + sw / 2 , (height - h - sh) / 2 + h + sh * 0.8);
                return this.canvas.toDataURL("image/png");
            },

            share(name, score){
              var obj = {
                  intent: 'SHARE', 
                  image:  this.draw(score),
                  text: "Can you beat me in " + name + "?",
                  data: { myReplayData: 'pking' },
              };
              FBInstant.shareAsync(
                obj
              ).then(function() {
                  Console("Share Success")
              });
            }
        }.do()

    window.showInterstitial = {
//      adId: window.facebookAdIds[scenceGames].ADS,
      adId: '',
      ad: null,
      bol: false,
      num: 0,
      init(){
          var supportedAPIs = FBInstant.getSupportedAPIs();
          if (supportedAPIs.includes('getInterstitialAdAsync') && supportedAPIs.includes('getRewardedVideoAsync')){
            var self = this;
            FBInstant.getInterstitialAdAsync(
              this.adId,
            ).then(function(interstitial) {
              self.ad = interstitial;
              return self.ad.loadAsync();
            }).then(function(){
              self.bol = true;
            })
            .catch(function(e) {
              //document.getElementById('error-messages').innerHTML = "load:" + e.message;
              self.init();
            });
          }
      },

      show(){
        var self = this;
        if(this.ad && this.bol){
          this.ad.showAsync().catch(function(e) {
            //document.getElementById('error-messages').innerHTML = "show:" + e.message;
          });
          self.bol = false;
          this.init();
          return true;
        }
        return false;
      }
    }
  </script>
</html>
